<template>
   <div class="login">
      <form @submit="login" class="form">
         <sex-input label="用户名" type="text" v-model="userValue"></sex-input>
         <sex-input label="密码" type="password" v-model="passValue"></sex-input>
         <el-button-group style="width: 100%;">
               <el-button style="width: 50%" size="large" color="#0188fb" type="primary"
                  native-type="submit">登陆</el-button>
               <el-button style="width: 50%;" size="large" type="info" disabled plain>
                  注册
               </el-button>
            </el-button-group>
      </form>
   </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import './index.less'
import sexInput from '../../components/sex-input/index.vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'

const userValue = ref('')
const passValue = ref('')
const router = useRouter();

const login = () => {
   const form: any = document.querySelector('.form')
   document.body.appendChild(form);
   if (userValue.value === 'admin' && passValue.value === 'admin') {
      // router.push('/tables');
      router.push('/layout');
   } else {
      ElMessage({
         message: `请输入正确账户信息`,
         type: 'warning',
      })
   }
}

</script>
<style scoped></style>
